<style>      
  @import './../css/goodsInfo.css';
</style>
<template>
  <div>
    <div class="goodsInfo">
      <!-- 轮播图 -->
      <div class="slider">
        <swiper :options="swiperOption"  ref="mySwiper">
          <swiper-slide v-if='data && data.galleryList' v-for="datas in data.galleryList">
            <div class="slideShow">
              <img v-bind:src='datas.medium' alt="">
            </div>
          </swiper-slide>
          <!-- 这是轮播的小圆点 -->  
          <div class="swiper-pagination" slot="pagination"></div>  
        </swiper>
      </div>
      <!-- 单品信息摘要 -->
      <div class="goods_summary_box">
        <!-- 品牌和商品名称 -->
        <div class="title_and_icon">
          <span class='brand'>{{data.brandName}}</span>
          <span v-if='data.salesType=="7"' class="cross-border">跨境</span>
          <span class="dataProductName">{{data.productName}}</span>
        </div>
        <!-- 商品编码 -->
        <p class="goods_code">商品编码 : {{data.productCode}}</p>
        <!-- 因为无库存服务器不会返回eachSidePrice的字段，所以售价暂时用minSalesPrice代替，在goodsSku.vue文件中是用正常的字段和判断-->
        <div class="goods_price" v-if='data && data.minSalesPrice'>
          <div>
            <p>￥{{data.minSalesPrice}}</p>&nbsp;&nbsp;
            <!-- 如果原价小于售价，则隐藏原价 -->
            <span v-if='data.minSalesPrice<data.marketPrice'>吊牌价： <s> {{data.marketPrice}}</s></span>
          </div>
        </div>
        <div class="sub-box flex-box" v-if='data.salesType=="7"'>
          <!-- 邦购里没有找到此数据 -->
          <span class="sub-date" v-if='data && data.taxPrice'>跨境综合税：需缴纳￥{{data.taxPrice}}跨境电商综合税</span>
          <i class="tax_detail_btn bgwap-iconfont">&#xe65c;</i>
        </div>
        <div v-if='data.salesType !="7"' class="tax_detail_btn" type="hidden"></div>
        <div v-if='data.salesType == "5"' class="sub-box flex-box">
          <span class="sub-tag">预购</span>
          <span class="sub-date" v-if='data && data.deliverDate'>预计发货日期：{{data.deliverDate}}</span>
        </div>
        <!-- 正品保障，14天退换 -->
        <div class="goods_service flex-box">
          <p class="">
            <span class='icon_font'><icon class="genuineGuarantee_icon" name="genuineGuarantee" scale="10"></icon></span>
            <span>正品保障</span>
          </p>
          <p class="">
            <span class='icon_font'><icon class="rapidDelivery_icon" name="rapidDelivery" scale="10"></icon></span>
            <span>极速发货</span>
          </p>
          <p class="">
            <span class='icon_font' id='icon_font'><icon class="afterSaleProtection_icon" name="afterSaleProtection" scale="10"></icon></span>
            <span>售后保障</span>
          </p>
        </div>
        <div class="shade"></div>
      </div> 
    </div>
  </div>
</template>
<script>
  import {TransferDom, Popup, Group, Cell ,XHeader, XInput, XButton, Box, Sticky, TabItem, Tab, XImg } from 'vux'
  import {swiper, swiperSlide} from 'vue-awesome-swiper' 
  export default {
    name: 'goodsInfo',
    components: {
      XImg,
      TransferDom,
      Popup,
      Group,
      Cell,
      XHeader,
      XInput,
      XButton,
      Box,
      swiper,  
      swiperSlide,
      Sticky,
      TabItem,
      Tab  
    },
    directives: {
      TransferDom,
    },
    data () {
      return {
          isActive: true,
          //弹窗规格的初始值  
          popActiveGuiGe: null,
          //弹窗规格的初始值
          popActiveColor: null,
          selected: true,
          show: false,
          info: "",
          data:{},
          secondData: {},
          swiperOption: {  
          //是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true  
          notNextTick: true,  
          pagination: '.swiper-pagination',  
          slidesPerView: 'auto',  
          centeredSlides: true,  
          paginationClickable: true,  
          spaceBetween: 30,  
          onSlideChangeEnd: swiper => {  
            //这个位置放swiper的回调方法  
            this.page = swiper.realIndex+1;  
            this.index = swiper.realIndex;  
            }  
          },
      }
    },
    //定义这个sweiper对象  
    computed: {  
        swiper() {  
          return this.$refs.mySwiper.swiper;  
        }  
    }, 
    methods: {

    },
    mounted: function() {
    //子组件中的ajax通过组件通信的方式引用
    //父组件里的data值改变，就会执行该函数，this.data有值，该页面就会重新渲染
    this.data = this.$attrs.getProductInfoUrlAjax;
    //这边就可以使用swiper这个对象去使用swiper官网中的那些方法  
    this.swiper.slideTo(0, 0, false); 
    },
    beforeUpdate() {
      //子组件中的ajax通过组件通信的方式引用
      this.data = this.$attrs.getProductInfoUrlAjax;
    }
  }
</script>










